.playFull {
  @apply bg-bg flex flex-col py-4 px-5;
  width: 21.875rem;
  height: 26.25rem;

  .lines {
    @apply flex flex-nowrap relative;

    .noLine {
      @apply text-center w-full font-medium text-lg;
      height: 3.75rem;
      line-height: 3.75rem;
      color: #666666;
    }

    .lineBtn {
      @apply rounded flex items-center h-10 justify-center text-base shrink-0 cursor-pointer;
      width: 7.5rem;

      &:not(:first-child) {
        margin-left: 0.625rem;
      }

      &.lineOfficial {
        @apply font-semibold relative;
        background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
        color: #7c3c19;

        span {
          @apply font-semibold;
        }

        .vipTip {
          @apply absolute right-0 flex items-center justify-center;
          top: -0.625rem;
          width: 4.875rem;
          height: 1.125rem;
          background: linear-gradient(270deg, #f34c42 0%, #f68d44 100%);

          span {
            @apply text-xs inline-block font-medium whitespace-nowrap text-white;
            transform: scale(0.8);
          }
        }
      }

      &.lineThird {
        @apply bg-bg25 text-white-80;
        border: 1px solid rgba(255, 255, 255, 0.2);

        &:hover {
          border: 2px solid #ffffff;
        }
      }

      &.lineLive {
        @apply text-theme;
      }

      &.switchLine {
        @apply ml-5;
        width: 1.875rem;

        .arrow {
          @apply w-5 h-5;
          transform: rotate(-90deg);
          transition: all 0.3s;
        }
      }

      &.openPanel {
        .arrow {
          transform: rotate(0deg);
        }
      }

      &.linePanelItem {
        @apply ml-0 justify-between px-10 overflow-y-auto;
        width: 80%;
        margin-bottom: 0.625rem;
        max-height: 18.125rem;
      }
    }

    .linePanel {
      @apply absolute w-full left-0 mt-10 z-4 bg-bg py-5 overflow-y-auto;
      max-height: 18.75rem;

      &::-webkit-scrollbar {
        width: 0.25rem;
      }

      &::-webkit-scrollbar-corner,
      &::-webkit-scrollbar-track {
        background-color: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.2);
      }
    }

    .nullLine {
      @apply w-full flex flex-col items-center justify-center;

      .img {
        width: 10rem;
      }

      .text {
        @apply text-base text-white-80;
        font-family: PingFang SC;
      }
    }
  }

  .orderBox {
    @apply flex items-center my-5;

    .jujiText {
      @apply text-base font-medium whitespace-nowrap;
      color: #999;
      font-family: Alibaba PuHuiTi 2;
    }

    .selectSpace {
      margin-left: 0.875rem;
      margin-right: 6.25rem;
    }
  }

  .jujiBox {
    @apply w-full flex-1 overflow-y-auto mt-4;

    &::-webkit-scrollbar {
      width: 0.25rem;
    }

    &::-webkit-scrollbar-corner,
    &::-webkit-scrollbar-track {
      background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.2);
    }

    .jujiItem {
      @apply inline-block mr-3 h-10 w-10 leading-10 bg-bg25 text-white-80 text-base text-center overflow-hidden;
      border: 1px solid rgba(255, 255, 255, 0.2);

      &:nth-child(6n + 6) {
        @apply m-0;
      }

      &:hover {
        @apply text-theme;
      }

      &:not(:first-child) {
        @apply mt-2;
      }

      &.jujiActive {
        @apply text-theme;
      }

      &.jujiShow {
        @apply mr-0 rounded;
        width: calc(100% - 0.625rem);
      }

      .jujiTitle {
        @apply text-white font-medium text-lg;
        margin-bottom: 0.625rem;
      }

      .jujiInfo {
        @apply w-full flex items-center;
        height: 6.875rem;

        &:hover {
          background-color: rgba(255, 255, 255, 0.1);
        }

        .jujiPoster {
          @apply h-full shrink-0;
          width: 12.125rem;
          margin-right: 0.625rem;
        }

        .jujiDesc {
          @apply overflow-hidden text-sm text-white-60 leading-5 pr-2;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
